import deepClone from '@/libs/deepClone'
import {CSSProperties, defineComponent, PropType} from 'vue'

const boldColor = '#31456A'
const mediumColor = '#31456A'
const normalColor = '#909399'

// kmedium: ['kaigengo-medium'],
// kbold: ['kaigengo-bold'],
// kregular: ['kaigengo-regular'],
// visualScreenTitle: ['visualScreen-title'],

const boldStyle: CSSProperties = {
  color: boldColor,
  fontFamily: 'kaigengo-bold',
  fontWeight: 700,
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap'
}

const mediumStyle: CSSProperties = {
  color: mediumColor,
  fontFamily: 'kaigengo-medium',
  fontWeight: 500,
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap'
}

const normalStyle: CSSProperties = {
  color: normalColor,
  fontFamily: 'kaigengo-regular',
  fontWeight: 400,
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap'
}

/**
 * @desc 中文 正常粗细
 * @desc 元素p
 */
export const CnNormalP = defineComponent({
  props: {
    onClick: Function,
    style: Object as PropType<CSSProperties>
  },
  emits: {
    dblclick: (): boolean => true
  },
  setup(props, {slots, emit}) {
    return () => (
      <div
        class='font-regular font-normal'
        onClick={() => props.onClick && props.onClick()}
        onDblclick={() => emit('dblclick')}
        style={Object.assign(deepClone(normalStyle), props.style)}
      >
        {slots.default?.()}
      </div>
    )
  }
})

/**
 * @desc 中文 粗细 500
 * @desc 元素span
 */
export const CnMediumP = defineComponent({
  props: {
    onClick: Function as PropType<(e: MouseEvent) => void>,
    style: Object as PropType<CSSProperties>
  },
  setup(props, {slots}) {
    return () => (
      <div
        style='font-family: VIVO1'
        class='font-medium'
        onClick={e => props.onClick && props.onClick(e)}
        style={Object.assign(deepClone(mediumStyle), props.style)}
      >
        {slots.default?.()}
      </div>
    )
  }
})

/**
 * @desc 中文 加粗
 * @desc 元素p
 */
export const CnBoldP = defineComponent({
  props: {
    onClick: Function,
    style: Object as PropType<CSSProperties>
  },
  setup(props, {slots}) {
    return () => (
      <div
        class=''
        onClick={() => props.onClick && props.onClick()}
        style={Object.assign(deepClone(boldStyle), props.style)}
      >
        {slots.default?.()}
      </div>
    )
  }
})

/**
 * @desc 中文 正常粗细
 * @desc 元素span
 */
export const CnNormalSpan = defineComponent({
  props: {
    onClick: Function,
    onDblclick: Function,
    style: Object as PropType<CSSProperties>
  },
  emits: {
    dblclick: (): boolean => true
  },
  setup(props, {slots, emit}) {
    return () => (
      <span
        onClick={() => props.onClick && props.onClick()}
        onDblclick={() => emit('dblclick')}
        class=''
        style={Object.assign(deepClone(normalStyle), props.style)}
      >
        {slots.default?.()}
      </span>
    )
  }
})

/**
 * @desc 中文 粗细 500
 * @desc 元素span
 */
export const CnMediumSpan = defineComponent({
  props: {
    onClick: Function,
    style: Object as PropType<CSSProperties>
  },
  setup(props, {slots}) {
    return () => (
      <span
        onClick={() => props.onClick && props.onClick()}
        style='font-family: VIVO1;font-size:15px'
        class=' font-medium'
        style={Object.assign(deepClone(mediumStyle), props.style)}
      >
        {slots.default?.()}
      </span>
    )
  }
})

/**
 * @desc 中文 加粗
 * @desc 元素span
 */
export const CnBoldSpan = defineComponent({
  props: {
    onClick: Function,
    style: Object as PropType<CSSProperties>
  },
  setup(props, {slots}) {
    return () => (
      <span
        onClick={() => props.onClick && props.onClick()}
        style={Object.assign(deepClone(boldStyle), props.style)}
        class=''
      >
        {slots.default?.()}
      </span>
    )
  }
})
